<template>
  <div>
    <el-select v-model="materialStorage" :clearable="clearable" :disabled="disabled" :placeholder="placeholder" class="width-120"
               filterable style="width: 100%;" @change="materialStorageChange">
      <el-option v-for="item in materialStorageList" :key="item.storageId" :label="item.storageName"
                 :value="item.storageId">
      </el-option>
    </el-select>
  </div>
</template>

<script lang="ts" setup>

import {getStorageDictBySelfStorage} from "@/api/material/materialVsSubordinate.ts"

const {proxy} = getCurrentInstance() as any;
const materialStorage = ref('')
const emits = defineEmits(["materialStorageChange"])
// 库房list
const materialStorageList = ref<any>([])
const props = defineProps({
  placeholder: {
    type: String,
    default: "请选择"
  },
  // 对应需要查询的库房等级
  materialFromLevelStr: {
    type: String,
    default: ""
  },
  value: {
    type: String,
    default: ''
  },
  valueStorageId: {
    type: String,
    default: ''
  },
  clearable: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  },
  // 机构id
  orgId: {
    type: String,
    default: ''
  }
})

watch(() => props.materialFromLevelStr, (newValue, _oldValue) => {
  if (newValue) {
    getMaterialStorageList()
  }
}, {deep: true, immediate: true})

watch(() => props.value, (newValue, _oldValue) => {
  materialStorage.value = newValue
}, {immediate: true})

function setValue(value) {
  materialStorage.value = value
}

// 获取本机构库房字典list
function getMaterialStorageList() {
  const param = {
    selfStorageId: props.valueStorageId,
    orgId: props.orgId,
    materialFromLevelArray: proxy.$stringToArray(props.materialFromLevelStr, ","),
  }
  getStorageDictBySelfStorage(param).then(res => {
    materialStorageList.value = res.data 
  })
}

function materialStorageChange(value) {
  let materialStorageInfo = {}
  let index = materialStorageList.value.findIndex(item => {
    return item.storageId === value
  })
  if (index > -1) {
    materialStorageInfo = materialStorageList.value[index]
  }
  emits("materialStorageChange", materialStorageInfo)
}

defineExpose({
  setValue,
  getMaterialStorageList
})
</script>

<script lang="ts">

export default {
  name: "materialStorageDept"
}
</script>

<style scoped></style>
